<template>
  <div class="oj-detail-container" v-if="problem">
    <div class="problem-header">
      <span class="problem-id">#{{ problem.id }}</span>
      <span class="problem-title">{{ problem.title }}</span>
      <span class="difficulty" :class="problem.difficulty">{{ difficultyText(problem.difficulty) }}</span>
    </div>
    <div class="problem-desc">{{ problem.description }}</div>
    <div class="oj-editor">
      <label for="code-editor">代码编辑器：</label>
      <textarea
        id="code-editor"
        v-model="userCode"
        rows="10"
        placeholder="在这里输入你的仓颉代码"
      ></textarea>
    </div>
    <button class="submit-btn" @click="handleSubmit">提交评测</button>
    <div class="oj-result" v-if="resultMsg">
      <strong>评测结果：</strong>
      <span :class="resultClass">{{ resultMsg }}</span>
    </div>
  </div>
  <div v-else class="oj-detail-container">
    <p>题目不存在。</p>
  </div>
</template>

<script>
const problems = [
  { id: 1, title: '两数之和', description: '给定一个整数数组和一个目标值，找出数组中和为目标值的两个数。', difficulty: 'easy', answer: '...' },
  { id: 2, title: '两数相加', description: '给定两个非空链表，表示两个非负整数。', difficulty: 'easy', answer: '...' },
  { id: 3, title: '无重复字符的最长子串', description: '给定一个字符串，请你找出其中不含有重复字符的最长子串的长度。', difficulty: 'medium', answer: '...' },
  { id: 4, title: '寻找两个正序数组的中位数', description: '给定两个大小为 m 和 n 的正序（从小到大）数组，找出并返回两个正序数组的中位数。', difficulty: 'medium', answer: '...' },
  { id: 5, title: '最长回文子串', description: '给你一个字符串 s，找到 s 中最长的回文子串。', difficulty: 'hard', answer: '...' },
  { id: 6, title: 'Z 字形变换', description: '将一个给定字符串根据给定的行数，以从上往下、从左到右进行 Z 字形排列。', difficulty: 'medium', answer: '...' },
  { id: 7, title: '整数反转', description: '给你一个 32 位的有符号整数 x ，返回将 x 中的数字部分反转后的结果。', difficulty: 'medium', answer: '...' },
  { id: 8, title: '字符串转换整数 (atoi)', description: '请你来实现一个 myAtoi(string s) 函数，使其能将字符串转换成一个 32 位有符号整数。', difficulty: 'hard', answer: '...' },
  { id: 9, title: '回文数', description: '给你一个整数 x ，如果 x 是一个回文整数，返回 true ；否则，返回 false 。', difficulty: 'easy', answer: '...' }
];
export default {
  name: 'CangjieOJDetail',
  data() {
    return {
      problem: null,
      userCode: '',
      resultMsg: '',
      resultClass: ''
    }
  },
  created() {
    const id = parseInt(this.$route.params.id);
    this.problem = problems.find(p => p.id === id);
  },
  methods: {
    handleSubmit() {
      // 这里只做演示，实际应调用后端评测
      if (this.userCode.trim().length > 0) {
        this.resultMsg = '代码已提交，评测通过（演示）';
        this.resultClass = 'success';
      } else {
        this.resultMsg = '请输入代码后再提交。';
        this.resultClass = 'error';
      }
    },
    difficultyText(d) {
      if (d === 'easy') return '简单';
      if (d === 'medium') return '中等';
      if (d === 'hard') return '困难';
      return d;
    }
  }
}
</script>

<style scoped>
.oj-detail-container {
  max-width: 900px;
  margin: 40px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 40px 32px;
}
.problem-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.problem-id {
  color: #6d28d2;
  font-weight: bold;
  font-size: 1.1rem;
}
.problem-title {
  font-size: 1.3rem;
  font-weight: 600;
}
.difficulty {
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 14px;
}
.difficulty.easy {
  color: #22c55e;
  background: #e7fbe9;
}
.difficulty.medium {
  color: #f59e42;
  background: #fff7e6;
}
.difficulty.hard {
  color: #ef4444;
  background: #ffeaea;
}
.problem-desc {
  background: #f3f4f6;
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 22px;
}
.oj-editor {
  margin-bottom: 18px;
}
#code-editor {
  width: 100%;
  font-family: 'Fira Mono', 'Consolas', monospace;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 120px;
  resize: vertical;
}
.submit-btn {
  background: #6d28d2;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 32px;
  font-size: 1rem;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background 0.2s;
}
.submit-btn:hover {
  background: #5b21b6;
}
.oj-result {
  margin-top: 12px;
  font-size: 1.1rem;
}
.success {
  color: #22c55e;
}
.error {
  color: #ef4444;
}
</style> 